<template>

  <!--  //通过model初始化组件，    ref组件对象，获取组件中的暴露方法，实现黑盒模式的 显式互相调用。-->

  <SearchTablePage :search-config="baseTableSearchModel" :table-config="baseTableModel"/>

</template>

<script lang="ts" setup>
defineOptions({
  name: 'ConsoleRolePageData',   //全局别名
  title: '角色管理',   //标题
});
// 接口
import ConsoleRoleApi from '/@/api/console/ConsoleRoleApi.ts';


import FORM_FIELD_TYPE from '/@/constants/FormFieldType';
import VDialog  from '/@/utils/dialogUtil.ts'

const router = useRouter();
const baseTable = ref(null as any);
const baseTableSearch = ref(null as any);
const editRef = ref<any>(null);

// 表格搜索初始化searchModel
const baseTableSearchModel = ref({
  columnCount: 4,
  expandLimit: 6,
  autoFit: true,
  columnWidth: '300px',
  labelPosition: 'left',
  labelWidth: '100px',
  search:async (reset: Boolean) => {  //搜索、重置按钮  回调方法钩子   实现父类 ---夸组件调用


  },
  items: [ //搜索项初始化


    {
      label: "角色名称",
      field: "name",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder:"请输入",

    },

    {
      label: "角色描述",
      field: "description",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder:"请输入",

    }
  ],

  buttons: [    //功能区域

    {
      name: "新增",
      buttonClass: 'primary',
      width: 100,
      click: ({row,handlers}) => {        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: '新增',

          content:{ //内容初始形式
            type: 'component', //text:"",预留文本
            name:'/console/consoleRole/edit',
            query: {  },

          },

          callBack: (data:any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });

      },
    }
  ]
})
// 表格初始化Model
const baseTableModel = ref({
  border: true,
  pagination: true,
  inline: true,
  selectable: true,
  isFullscreen: false,
  minWidth: '200px',
  data: {    //table  初始化
    current: 1,
    size: 10,
    total: 100,
    data: []
  },
  requestData:{api:ConsoleRoleApi.getPageData,query:{}},   //数据源 参数有效性： 'steady|transient'
  columns: [
    {
      label: "ID",
      field: "id",
      width:100,
    },
    {
      label: "角色名称",
      field: "roleName"
    },
    {
      label: "描述",
      field: "description",
      width:250,
    },
    {
      label: "创建时间",
      field: "create_time",
      width:200,
    },
    {
      label: "更新时间",
      field: "update_time",
      width:200,
    },
  ],


  actions: [
    {
      name: "分配权限",
      buttonClass: 'primary',   //按钮颜色控制
      buttonType: 'text',      // 按钮风格   text  link  button
      isShow: (row: object) => {  //根据业务做动态隐藏张氏
        return true
      },
      click: ({row,handlers}) => {        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: '分配权限',
          content:{ //内容初始形式
            type: 'component', //text:"",预留文本
            name:'/console/consoleRole/assign',
            query: { consoleRoleId: row.id,type: 0 },

          },

          callBack: (data:any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });

      },
      fixed: 'right'
    },
    {
      name: "编辑",
      buttonClass: 'primary',   //按钮颜色控制
      buttonType: 'text',      // 按钮风格   text  link  button
      isShow: (row: object) => {  //根据业务做动态隐藏张氏
        return true
      },
      click: ({row,handlers}) => {        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: '编辑',
          content:{ //内容初始形式
            type: 'component', //text:"",预留文本
            name:'/console/consoleRole/edit',
            query: { consoleRoleId: row.id },

          },

          callBack: (data:any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });

      },
      fixed: 'right'
    },

    {
      name: "删除",
      buttonClass: 'danger',
      buttonType: 'text',
      fixed: 'right',
      click: ({row, index,handlers}) => {

        $baseConfirm('您确定要删除当前项吗', null, async () => {

          const { message } =  await ConsoleRoleApi.del({  companyRoleIds: row.id })
          $baseMessage(message, 'success', 'vab-hey-message-success');

          handlers.refresh()
        })

      }
    },

  ]

})



onActivated(() => {
})



</script>


